<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天天购物</title>
    <link href="style.css" rel="stylesheet" />
</head>
<body>
	<nav class="main-nav">
	    <ul class="nav-list">
	        <li class="nav-item active">
	            <a href="#home">
	                <span class="nav-icon">🏠</span>
	                <span class="nav-text">首页</span>
	            </a>
	        </li>
	        <li class="nav-item">
	            <a href="#profile">
	                <span class="nav-icon">👤</span>
	                <span class="nav-text">我的</span>
	            </a>
	        </li>
	        <li class="nav-item">
	            <a href="#messages">
	                <span class="nav-icon">💬</span>
	                <span class="nav-text">消息</span>
	                <span class="badge">3</span>
	            </a>
	        </li>
	        <li class="nav-item">
	            <a href="#videos">
	                <span class="nav-icon">🎥</span>
	                <span class="nav-text">视频</span>
	            </a>
	        </li>
	    </ul>
	</nav>
	<button id="cart-toggle" class="cart-toggle">
	    <span class="cart-icon">🛒</span>
	    <span class="cart-badge"></span>
	</button>
    <div class="container">
        <h1 class="a1">欢迎来到天天购物</h1>
		<div class="carousel-container">
		    <div class="carousel-slide">
		        <div class="carousel-item active">
		            <img src="image/智能手表.png" alt="促销商品1">
		            <div class="carousel-caption">新款智能手表限时8折</div>
		        </div>
		        <div class="carousel-item">
		            <img src="image/耳机套装.png" alt="促销商品2">
		            <div class="carousel-caption">无线耳机套装立减200元</div>
		        </div>
		        <div class="carousel-item">
		            <img src="image/每日秒杀.png" alt="促销商品3">
		            <div class="carousel-caption">每日限时秒杀专场</div>
		        </div>
		    </div>
		    
		    <!-- 导航按钮 -->
		    <button class="carousel-prev">❮</button>
		    <button class="carousel-next">❯</button>
		    
		    <!-- 导航点 -->
		    <div class="carousel-dots"></div>
		</div>
		<div class="search-container">
		    <input type="text" id="search-input" placeholder="搜索商品名称..." autocomplete="off"><div class="search-icon">🔍</div>
		    
		</div>
        <div class="custom-divider">电子产品</div>
        <div class="product-list">
            <!-- 商品列表 -->
            <div class="product" data-id="1">
                <img src="image/手表.png" alt="商品1">
                <h3>智能手表</h3>
                <p>¥599.00</p>
                <button onclick="addToCart(1)">加入购物车</button>
            </div>
            
            <div class="product" data-id="2">
                <img src="image/耳机.png" alt="商品2">
                <h3>无线耳机</h3>
                <p>¥299.00</p>
                <button onclick="addToCart(2)">加入购物车</button>
            </div>
        </div>
		<div class="custom-divider">生活用品</div>
		<div class="product-list">
		    <!-- 商品列表 -->
		    <div class="product" data-id="3">
		        <img src="image/牙膏.png" alt="商品3">
		        <h3>牙膏</h3>
		        <p>¥59.00</p>
		        <button onclick="addToCart(3)">加入购物车</button>
		    </div>
		    
		    <div class="product" data-id="4">
		        <img src="image/牙刷.png" alt="商品4">
		        <h3>牙刷</h3>
		        <p>¥29.00</p>
		        <button onclick="addToCart(4)">加入购物车</button>
		    </div>
		</div>
		<div class="custom-divider">军事用品</div>
		<div class="product-list">
		    <!-- 商品列表 -->
		    <div class="product" data-id="5">
		        <img src="image/炮弹.png" alt="商品5">
		        <h3>炮弹</h3>
		        <p>¥5999.00</p>
		        <button onclick="addToCart(5)">加入购物车</button>
		    </div>
		    
		    <div class="product" data-id="6">
		        <img src="image/子弹.png" alt="商品6">
		        <h3>子弹64发</h3>
		        <p>¥90.00</p>
		        <button onclick="addToCart(6)">加入购物车</button>
		    </div>
		</div>
		<section class="comments-section">
		    <h2>用户评论 (<span id="comment-count">0</span>)</h2>
		    
		    <!-- 评论输入框 -->
		    <div class="comment-form">
		        <div class="user-avatar">👤</div>
		        <div class="input-group">
		            <input type="text" id="comment-author" placeholder="你的昵称">
		            <textarea id="comment-content" placeholder="写下你的购物体验..."></textarea>
		            <button onclick="postComment()">发表评论</button>
		        </div>
		    </div>
		
		    <!-- 评论列表 -->
		    <div class="comment-list" id="comment-list"></div>
		</section>
    </div>

    <div class="cart">
        <h2>购物车 (<span id="cart-count">0</span>)</h2>
        <div id="cart-items"></div>
        <p>总价: ¥<span id="total-price">0.00</span></p>
        <button onclick="clearCart()">清空购物车</button>
		<div class="checkout-actions">
		    <a href="结账.html" onclick="saveCart()" class="checkout-btn">
		        去结算 <span id="checkout-total"></span>
		    </a>
		</div>
    </div>

    <script src="script.js">
    </script>
</body>
</html>
